<template>
  <div>
    <div class="indexModelTitle">
       <div class="indexClassTitle">消防班型</div>
       <span class="countdown">
         距离考试还有
         <span class="countdownNum">
           <get-countdown />
         </span>
         天
       </span>
    </div>
    <ul class="indexClassListOn">
      <li class="indexClassList"
          v-for="item of fireList"
          :key="item.id"
      >
        <div class="indexClassImg">
          <img  class="indexClassImgs"
                :src="item.largePicture"
          />
        </div>
        <div class="indexClassTit">
          {{item.title}}
          <div class="indexClassNum">
            <span class="indexClassNumSpan">课程{{item.courseNum}}节</span>
            <div class="indexClassPag">
              {{item.price}}
              <span>{{item.studentNum}}人在学习</span>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import GetCountdown from '@/common/countdown'
import { fetchIndexFireList } from '@/api/index'
export default {
  name: 'IndexFireList',
  components: {
    GetCountdown
  },
  data () {
    return {
      fireList: []
    }
  },
  mounted () {
    this.getFireList()
  },
  methods: {
    getFireList () {
      const data = {
        t: 'zaMDWXp6G',
        r: '1566541387',
        z: '932C972DEF582EFF5D704B0F3DBF2BB5'
      }
      fetchIndexFireList(data).then(res => {
        this.fireList = res.data[0]
      })
    }
  }
}
</script>

<style lang="stylus">
@import '~@/assets/styles/maxins.styl'
@import '~@/assets/styles/varibles.styl'
  .indexClassPag >>> span
    font-size .56rem
    color #666666
  .indexModelTitle
    indexModelTitle()
    .indexClassTitle
      indexClassTitle()
    .countdown
      color $fontColor
      .countdownNum
        color $bgColor
  .indexClassListOn
    padding: 0rem .48rem .1rem;
    .indexClassList
      width 100%
      display flex
      box-shadow 0 3px 5px 0 rgba(0, 0, 0, 0.1)
      margin-top .4rem
      background #fff
      border-radius 6px
      height 2.4rem
      .indexClassImg
        width 48%
        .indexClassImgs
          width 100%
          height 100%
          border-radius 0.1rem
      .indexClassTit
        font-size .3rem
        text-overflow ellipsis
        white-space nowrap
        overflow hidden
        width 52%
        padding .24rem .24rem .24rem .16rem
        .indexClassNum
          padding-top 0.2rem
          font-size 0.24rem
          color #999999
          box-sizing border-box
          .indexClassNumSpan
            padding .1rem 0 .55rem
            display block
            font-size .16rem
          .indexClassPag
            font-size 0.3rem
            color #FF4848
            display flex
            justify-content space-between
</style>
